<template>
	<div class="container">
		<div class="header">
			<el-card>
				<div>浏览记录</div>
			</el-card>
		</div>
		<!-- 用户列表 -->
		<div class="mian-table">
			<div style="padding: 20px;width: 100%;">
				<el-form label-width="100" :model="form" :inline="true">
					<el-form-item label="昵称">
						<el-input v-model="form.nickname" placeholder="用户昵称筛选" clearable />
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="form.phone" placeholder="用户手机号筛选" clearable />
					</el-form-item>
					<el-form-item label="标题">
						<el-input v-model="form.title" placeholder="转单标题筛选" clearable />
					</el-form-item>
					<el-form-item label="日期筛选">
						<el-date-picker v-model="timeValue" type="daterange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
							value-format="timestamp">
						</el-date-picker>
					</el-form-item>
					<el-form-item size="large">
						<el-button type="primary" icon="el-icon-search" @click="goSearch()"
							style="margin-left: 12px">查询</el-button>
						<el-button @click="reloadForm">重置</el-button>
						<el-button @click="exportExcel" icon="el-icon-download" type="success">导出excel</el-button>
						<!-- <el-button @click="addrenyuan" type="success">添加</el-button> -->
					</el-form-item>
				</el-form>
				<div class="opera-table">
					<el-table :data="tableData" height="570px" max-height="570px" class="table" border style="">
						<el-table-column prop="title" label="标题" align="center">

						</el-table-column>
						<el-table-column prop="nickname" label="用户昵称" align="center">

						</el-table-column>
						<el-table-column prop="logo" label="用户头像" align="center">
							<template slot-scope="scope">
								<el-image style="width: 50px;height: 50px;" v-if='scope.row.logo!=""'
									:src='scope.row.logo'></el-image>
								<span v-else>暂无</span>
							</template>
						</el-table-column>
						<el-table-column prop="nickname" label="手机号" align="center">
							<template slot-scope="scope">
								<span v-if='scope.row.phone!=""'>{{scope.row.phone}}</span>
								<span v-else>暂无</span>
							</template>
						</el-table-column>
						<el-table-column prop="userprice" label="用户余额" align="center">
							<template slot-scope="scope">
								<span v-if='scope.row.userprice!=""'>￥{{scope.row.userprice}}</span>
								<span v-else>暂无</span>
							</template>
						</el-table-column>
						<el-table-column prop="addtime" label="浏览时间" align="center">
							<template slot-scope="scope">
								{{ scope.row.addtime | datefilter }}
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<div class="footer">
			<el-pagination align="center" background @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page.sync="form.pageNo" :page-size="form.pageSize"
				:page-sizes="[1, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import {
		procureloglist,
		excelProcurelog
	} from "@/api/scanLog.js";
	import {
		title
	} from "@/settings";
	import {
		datefilter
	} from '@/utils/arrToObj'
	export default {
		data() {
			return {
				currentPage: 1,
				pageSize: 1,
				tableData: [],
				total: '',
				userName: '',
				columns: [{
						dataKey: 'adminid',
						title: '用户id',
					},
					{
						dataKey: 'content',
						title: '日志内容',
					}
				],
				form: {
					pageNo: 1,
					pageSize: 10,
					inttime: 0,
					endtime: 0,
					phone: '',
					nickname: '',
					title: ''
				},
				timeValue: ''
			}
		},
		beforeMount() {
			this.getList()
		},
		filters: {
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT =
						Year +
						"-" +
						Moth +
						"-" +
						Day +
						"   " +
						Hour +
						":" +
						Minute +
						":" +
						Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		methods: {
			reloadForm() {
				this.form.phone = '';
				this.form.inttime = 0;
				this.form.endtime = 0;
				this.form.nickname = '';
				this.form.pageNo = 1;
				this.form.pageSize = 10;

				this.form.title = '';
				this.timeValue = '';
				this.getList();
			},
			// 搜索按钮点击
			goSearch() {
				if (this.timeValue) {
					this.form.inttime = parseInt(this.timeValue[0] / 1000);
					this.form.endtime = parseInt(this.timeValue[1] / 1000);
				}
				this.getList()
			},
			// 获取日志列表
			async getList() {
				// console.log(1111)
				let arr = await procureloglist(this.form)
				if (arr.code == 0 && arr.data.length !== 0) {
					this.tableData = arr.data.data
					this.total = arr.data.totalCount
					this.loading = false
				}

			},
			handleSizeChange(val) {
				this.form.pageSize = val;
				this.getList();
			},
			//当前页改变时触发 跳转其他页
			handleCurrentChange(val) {
				this.form.pageNo = val;
				this.getList();
			},
			// 导出excel表格
			async exportExcel() {
				console.log('zzzzzzzzzzzzz')
				if (this.timeValue) {
					this.form.inttime = parseInt(this.timeValue[0] / 1000);
					this.form.endtime = parseInt(this.timeValue[1] / 1000);
				}
				let param = {
					pageNo: this.form.pageNo,
					pageSize: this.form.pageSize,
					title: this.form.title,
					nickname: this.form.nickname,
					phone: this.form.phone,
					inttime: this.form.inttime == "" ?
						"" : Math.floor(this.form.inttime ),
					endtime: this.form.endtime == "" ?
						"" : Math.floor(this.form.endtime),

				};
				console.log('zzzzzzzzzz',param )
				// this.$router.push({ path: "https://api.suishilian.com/admin/exceldc", query: param });
				// const externalLinkWithParams = `http://127.0.0.1:8082/admin/excelshtk?phone=${param.phone}&nickname=${param.nickname}&status=${param.status}`;
				const externalLinkWithParams =
					`http://zdb.suishilian.com/admin/excelProcurelog?title=${param.title}&inttime=${param.inttime}&endtime=${param.endtime}&phone=${param.phone}&nickname=${param.nickname}&pageNo=${param.pageNo}&pageSize=${param.pageSize}`;

				window.location.href = externalLinkWithParams;
			}
		},
	}
</script>
<style style="scss" scoped>
	.header {
		font-size: 18px;
		font-weight: 400
	}

	.container {
		background-color: #EBEEF5
	}

	.mian-table {
		height: 693px;
		margin: 20px;
		background-color: white;

		.add-drawer-btn {
			padding: 20px 0 20px 20px;
			position: absolute;
			bottom: 0;
			right: 5%;
			text-align: right
		}

		.opera-table {
			padding-right: 20px;
			padding-bottom: 20px;

			.table {
				width: 100%;
				margin: 10px;
			}
		}

		.form-item {
			width: 250px;
		}
	}

	.footer {
		height: 3%;
		background-color: white;
		/* text-align: center; */
		padding: 20px
	}
</style>